{include file="common/head"}

  <div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
  </div>
  <script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm layui-bg-red" id="delCheck">删除选中</button>
  </div>
</script>
  <script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs layui-bg-gray" lay-event="read">查看文章</a>
    <!-- <a class="layui-btn layui-btn-xs layui-bg-gray" lay-event="userInfo">查看发言者</a> -->
  </div>
</script>
{include file="common/bottom"}

  <script>
    layui.use(['table', 'dropdown'], function () {
      var table = layui.table;
      var dropdown = layui.dropdown;
      var $ = layui.$
      let delObj = []
      function delCom(id) {
        $.ajax({
          url: '/admin/comment/del/id/' + id
          , dataType: 'json'
          , success: (res) => {
            if (res.code == 200) {
              layer.msg('删除成功', { icon: 6 })
            } else {
              layer.msg('删除失败', { icon: 5 })
            }
          }
        })
      }
      // 创建渲染实例
      table.render({
        elem: '#test',
        url: '/admin/comment/list',
        toolbar: '#toolbarDemo',
        parseData: function (res) {
          return {
            "code": res.code, // 解析接口状态
            "msg": res.msg, // 解析提示文本
            "count": res.count, // 解析数据长度
            "data": res.data.data
          };
        },
        defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
          title: '提示',
          layEvent: 'LAYTABLE_TIPS',
          icon: 'layui-icon-tips',
          onClick: function (obj) { // 2.9.12+
            layer.alert('自定义工具栏图标按钮');
          }
        }],
        height: 'full',
        css: [
          '.layui-table-tool-temp{padding-right: 145px;}'
        ].join(''),
        cellMinWidth: 80,
        totalRow: true, // 开启合计行
        page: true,
        cols: [[
          { type: 'checkbox', fixed: 'left' },
          { field: 'id', width: 80, title: 'ID', sort: true },
          { field: 'article_id', width: 80, title: '文章ID' },
          { field: 'comment', width: 300, title: '评论内容' },
          { field: 'user_id', width: 80, title: '用户ID' },
          { field: 'username', width: 150, title: '评论者' },
          { field: 'create_time', title: '评论时间', width: 200 },
          { title: '操作', width: 300, minWidth: 125, toolbar: '#barDemo' }
        ]],
        done: function () {
          var id = this.id;
          // 删除选中
          $('#delCheck').click(() => {
            let confir = layer.confirm('确定要删除选中的评论吗？', () => {
              let delId = []
              delObj.forEach((el) => {
                delId.push(el.data.id)
                el.del()
              })
              delId.forEach((e) => {
                delCom(e)
              })
              layer.close(confir)
              layer.msg('删除成功', { 'icon': 6 })
            })

          })
        },
        error: function (res, msg) {
          console.log(res, msg)
        }
      });

      // 工具栏事件
      table.on('toolbar(test)', function (obj) {
        var id = obj.config.id;
        var checkStatus = table.checkStatus(id);
        var othis = lay(this);
        switch (obj.event) {
          case 'examine':
            var getData = table.getData(id);
            let idArr = []
            layer.confirm('确定要一键审核吗？', (res) => {
              getData.forEach((el) => {
                if (el.status == 0) {
                  idArr.push(el.id)
                }
              })
              idArr.forEach(e => {
                let data = {
                  id: e
                  , status: 1
                }
                $.ajax({
                  url: '/admin/article/doUpdate'
                  , data: data
                  , type: 'post'
                })
              });
              layer.msg('审核成功', { icon: 6 })
              table.reload('test', {
                where: {
                  abc: '123456',
                },
              })
            })
            break;
        };
      });
      // 表头自定义元素工具事件 --- 2.8.8+
      table.on('colTool(test)', function (obj) {
        var event = obj.event;
        if (event === 'email-tips') {
          layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
            title: '当前列属性配置项'
          });
        }
      });

      table.on('tool(test)', function (obj) { // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        if (obj.event === 'del') {
          delCom(data.id)
        } else if (obj.event == 'read') {
          layer.open({
            title: data.content,
            type: 2,
            area: ['80%', '80%'],
            content: '/index/article/index.html?art_id=' + data.article_id
          });
        }
      });
      // 复选框 批量删除
      table.on('checkbox(test)', function (obj) {
        if (obj.checked) {
          delObj.push(obj)
        } else {
          delObj.pop(obj)
        }
      });
      // 行单击事件
      table.on('row(test)', function (obj) {
        //layer.closeAll('tips');
      });
      // 行双击事件
      table.on('rowDouble(test)', function (obj) {
      });

      // 单元格编辑事件
      table.on('edit(test)', function (obj) {
        var field = obj.field; // 得到字段
        var value = obj.value; // 得到修改后的值
        var data = obj.data; // 得到所在行所有键值
        // 值的校验
        if (field == 'sort') {
          var regPos = /^[0-9]+.?[0-9]*/
          if (!regPos.test(obj.value)) {
            layer.tips('输入的排序格式应为数字', this, { tips: 1 });
            return obj.reedit();
          } else {
            $.ajax({
              url: '/admin/article/doUpdate'
              , type: 'post'
              , data: {
                id: data.id
                , sort: obj.value
              }
              , dataType: 'json'
              , success: (res) => {
                /*  if (res.code == 200) {
                   layer.msg('修改成功', { icon: 6 })
                 } else {
                   layer.msg('删除失败', { icon: 5 })
                 }
*/
              }
            })
            table.reload('test', {
              where: {
              }
            })
          }
        }

        layer.msg('编辑成功', { icon: 1 });

        // 其他更新操作
        var update = {};
        update[field] = value;
        obj.update(update);
      });
    });
  </script>
</body>

</html>